/**
 * @file Clipped Lines
 * @description Highlight intersecting parts of drawn lines
 * @difficulty 2
 * @tags draw, visual
 * @minver 4000.0
 * @category concepts
 */

kaplay();

const r = new Rect(vec2(100, 100), 300, 200);
const c = new Circle(vec2(250, 200), 100, 100);
const res = new Line(vec2(), vec2());
const testLines = [
    new Line(vec2(20, 40), vec2(500, 200)),
    new Line(vec2(20, 80), vec2(60, 20)),
    new Line(vec2(170, 200), vec2(260, 220)),
    new Line(vec2(150, 40), vec2(300, 40)),
    new Line(vec2(40, 100), vec2(40, 170)),
    new Line(vec2(160, 140), vec2(240, 140)),
    new Line(vec2(120, 150), vec2(120, 190)),
];

function drawRectClippedLine(r, l) {
    drawLine({
        p1: l.p1,
        p2: l.p2,
        color: WHITE,
    });

    if (clipLineToRect(r, l, res)) {
        drawLine({
            p1: res.p1,
            p2: res.p2,
            color: GREEN,
        });
    }
}

function drawCircleClippedLine(r, l) {
    drawLine({
        p1: l.p1,
        p2: l.p2,
        color: WHITE,
    });

    if (clipLineToCircle(c, l, res)) {
        drawLine({
            p1: res.p1,
            p2: res.p2,
            color: GREEN,
        });
    }
}

scene("rect", () => {
    onDraw(() => {
        drawRect({
            pos: r.pos,
            width: r.width,
            height: r.height,
            fill: false,
            outline: {
                color: RED,
                width: 1,
            },
        });

        for (const line of testLines) {
            drawRectClippedLine(r, line);
        }
    });

    onKeyPress("c", () => {
        go("circle");
    });
});

scene("circle", () => {
    onDraw(() => {
        drawCircle({
            pos: c.center,
            radius: c.radius,
            fill: false,
            outline: {
                color: RED,
                width: 1,
            },
        });

        for (const line of testLines) {
            drawCircleClippedLine(c, line);
        }
    });

    onKeyPress("r", () => {
        go("rect");
    });
});

go("circle");
